import React from 'react'
// import { useSelector, useDispatch } from 'react-redux'

import { add, asyncCount } from './redux/store'
import { useAppSelector, useAppDispatch } from './redux/hooks'
export default function App() {
  // 问题: ts中state类型为unknow的问题
  //  解决: 利用typeof获取store.getState的类型.再利用ReturnType获取store.getState的返回值类型,就可以直接获取到redux中存储的数据的类型了
  const c = useAppSelector((state) => {
    return state.zs.c
  })

  // 这里的dispatch从js角度来说其实还是store.dispatch. 但是useDispatch定义返回值类型时,只定义了Dispatch这一个类型,缺少了ThunkDispatch类型.所以此时dispatch函数中不能传入函数,只能传入action对象
  const dispatch = useAppDispatch()
  return (
    <div>
      <p>{c}</p>
      <button
        onClick={() => {
          dispatch(add(1))
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          // 问题: dispatch的类型是Dispatch.简单来说,dispatch中必须传入一个action对象.不能传入函数.但是异步action返回值就是一个函数
          dispatch(asyncCount(9))
        }}
      >
        async +
      </button>
    </div>
  )
}
